<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				width: :400px;
				height: 400px;
				position: relative;
				background: yellow;
			}
			#animate{
				width: 50px;
				height: 50px;
				position: absolute;
				background: red;
			}
		</style>
	</head>
	<body>
		<p><button onclick="myMove()"></button></p>
		<div id="container">
			<div id="animate"></div>
		</div>
	</body>
</html>
<script>
	function myMove(){
		var elem = document.getElementById("animate");
		var pos = 0;
		var id = setInterval(frame,5);
		function frame(){
			if(pos == 350){
				clearInterval(id);
			}else{
				pos++;
				elem.style.top=pos+"px";
				elem.style.left=pst+"px";
			}
			
			
		}
	}
</script>
